<template>
	<view class="ResetPwd ">
		<!-- 导航部分 -->
		<app-headers></app-headers>
		<!-- #ifdef H5 -->
		<view class="paddtb20"></view>
		<!-- #endif -->
		<view class="paddlr30">
			<text class="cuIcon-back" @click="onBack"></text>
		</view>


		<!-- 内容部分 -->
		<view class="wid1p flex flex-col ali-cen mt100">

			<view class="fo-70 font-wei600 paddtb30">请输入绑定的手机号</view>
			<view class="wid09p flex ali-cen bor-bom-2-e5e5e5 paddtb20 mt30">
				<view class="fo-40 paddlr30 ml80">+86</view>
				<view>
					<input class="fo-40" placeholder="" maxlength="11" v-model="form.phone" type="number" />
				</view>
				<text class="cuIcon-close" v-if="form.phone.length>0" @click="form.phone=''"></text>
			</view>
			<view class="flex flex-col wid1p ali-cen relative mt40">
				<button class="cu-btn fo-black wid09p" :class="{btnActive:isVerificationOk}" @click="onNext">下一步</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "",
		data() {
			return {
				form: {
					phone: ""
				}
			}
		},
		computed: {
			// 手机号格式验证是否成功
			isVerificationOk() {
				return this.$verify.PhoneFormat(this.form.phone)
			}
		},
		methods: {
			// 下一步
			onNext() {
				if(!this.$verify.PhoneFormat(this.form.phone)) return
				this.$pub.naviTo(`/pages/other/SMSCodeLogin/index?account=${this.form.phone}&&type=ResetPwd`)
			},
			onBack(){
				this.$pub.back()
			}
		}

	}
</script>

<style scoped lang="less">
	.ResetPwd {}

	.wid09p {
		width: 90%;
	}

	.cu-btn {
		height: 80rpx;
		background-color: #f8f8f8;
		color: gray;
	}

	.btnActive {
		background-color: skyblue;
		color: #ffffff;
	}
</style>
